<template>
  <div class="container">
    <el-scrollbar>
      <el-menu
        :default-active="default_active"
        class="el-menu-vertical-demo"
        unique-opened
        :collapse="isCollapse"
        @select="select_menu"
      >
        <el-menu-item
          index="/index"
          class="c_fff cp p_left20"
          :class="!isCollapse ? 'flex' : 'flex_cc'"
        >
          <img
            src="@/assets/img/icon_house.png"
            style="width: 24px; height: 28px"
          />
          <img
            v-if="!isCollapse"
            src="@/assets/img/logo.png"
            style="width: 80px; height: 14px; margin-left: 4px"
          />
        </el-menu-item>
        <el-sub-menu
          v-for="(item, index) in menu_list"
          :key="index + ''"
          :index="index + 1 + ''"
          style="color: #fff"
        >
          <template #title>
            <svgBtn
              :icon="item.icon"
              class="cp"
              color="#fff"
              style="font-size: 18px; margin-right: 8px"
            ></svgBtn>
            <span>{{ item.name }}</span>
          </template>

          <div v-for="(item1, index1) in item.children" :key="index1 + ''">
            <el-sub-menu
              v-if="
                (item1.path == null || item1.path == '') &&
                item1.parentId == item.id
              "
              :index="item1.id + ''"
            >
              <template #title style="padding-left: 10px">{{
                item1.name
              }}</template>
              <div v-for="(item2, index2) in item1.children" :key="index2 + ''">
                <el-menu-item
                  v-if="item2.parentId == item1.id"
                  :index="item2.path"
                  style="padding-left: 30px"
                >
                  <span v-if="!isCollapse" class="menu_dian"></span>
                  {{ item2.name }}
                </el-menu-item>
              </div>
            </el-sub-menu>
            <el-menu-item
              v-if="
                item1.path != null &&
                item1.path != '' &&
                item1.parentId == item.id
              "
              :index="item1.path"
              style="padding-left: 20px"
            >
              <span v-if="!isCollapse" class="menu_dian"></span>
              {{ item1.name }}
            </el-menu-item>
          </div>
        </el-sub-menu>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import svgBtn from '@/components/svg_button.vue'
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter, onBeforeRouteUpdate } from 'vue-router'
import { useStore } from 'vuex'
import EventBus from '@/utils/EventBus'

const router = useRouter()
const store = useStore()

const default_active = ref('')
const isCollapse = computed(() => {
  return store.state.isCollapse
})
const tabs_list = ref(store.state.tabs_list)
const menu_list = computed(() => {
  return store.state.role_list
})
onMounted(() => {
  console.log(menu_list.value)
  router.push('index')
  EventBus.on('change_default_active', (e) => {
    console.log(e)
    default_active.value = e as any
  })
  EventBus.emit('menu_value', { index: '0', type: 1 })
})
onUnmounted(() => {
  EventBus.off('change_default_active')
  EventBus.off('top_chang_menu')
})
onBeforeRouteUpdate((to) => {
  var list = to.matched[0].children
  if (!has_tab(to.fullPath)) {
    for (let i in list) {
      if (to.fullPath == list[i].path) {
        var item = {
          name: list[i].name,
          path: list[i].path,
          label: (list[i] as any).label,
          is_active: true,
        }
        store.commit('add_tabs_list', item)
      }
    }
  }
})
const to_path = ref()
// 是否存在该tab
const has_tab = (path) => {
  var a = false
  for (let i in tabs_list.value) {
    if (path == tabs_list.value[i].path) {
      store.commit('select_tabs_list', i)
      a = true
    }
  }
  return a
}

const select_menu = (index, indexPath) => {
  //   const router_list = router.getRoutes() // 子路由集合
  console.log(index, indexPath)
  to_path.value = index
  router.push(to_path.value.substr(1, to_path.value.length - 1))
  if (index == '/index') {
    EventBus.emit('menu_value', { index: '0', type: 1 })
  } else {
    EventBus.emit('menu_value', { index: indexPath.toString(), type: 1 })
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-menu) {
  --el-menu-text-color: #fff !important;
  --el-menu-hover-text-color: #fff !important;
  --el-menu-bg-color: #2c3440 !important;
  --el-menu-hover-bg-color: #444d59 !important;
}
:deep(.el-scrollbar__bar) {
  display: none;
}
:deep(.el-sub-menu.is-active:not(:last-child)) {
  background-color: #3580eb;
}
:deep(.is-light) {
  background: #3d4550 !important;
}
.container {
  height: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-scrollbar {
  background: #3d4550;
}
.el-menu-vertical-demo {
  height: 100%;
  background: #3d4550 !important;
  color: #cfd4db;
}
.el-menu-item .menu_dian {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}
.is-active > .menu_dian {
  background-color: #3580eb;
}
.el-sub-menu .el-menu-item {
  background-color: #2c3440 !important;
  &:hover {
    background-color: #444d59 !important;
  }
  color: #cfd4db;
  padding-right: 30px !important;
}
.el-sub-menu .el-menu-item.is-active {
  color: #3580eb;
}
</style>
